<template>
	<view>
		<view class="box">
			<view class="each" v-for="i in list">
				<view class="equipment">
					<view class="img"></view>
					<view class="equipment-r">
						<view class="equipmen-name">灯带1</view>
						<view class="equipment-text">接口：K10</view>
					</view>
				</view>
				<u-line length="267rpx" style="margin: auto; margin-top: 32rpx"></u-line>

				<view class="timing z-margin-t-32">
					<view class="timing-l">
						<view class="timing-name">定时开启时间</view>
						<view class="timing-text">00:00</view>
					</view>
					<view class="timing-r" @click="installShow = true">
						<image src="../../static/set.png" mode=""></image>
					</view>
				</view>

				<view class="timing z-margin-t-32">
					<view class="timing-l">
						<view class="timing-name">定时关闭时间</view>
						<view class="timing-text">00:00</view>
					</view>
					<view class="timing-r">
						<u-switch size="20" activeColor="#4BC264" v-model="i.switch" @change="change"></u-switch>
					</view>
				</view>
				<u-line length="267rpx" style="margin: auto; margin-top: 32rpx"></u-line>
				
				<view class="timing z-margin-t-24">
					<view class="timing-l">
						<view class="timing-name">运行状态</view>
					</view>
					<view class="timing-r">
						<u-switch size="20" activeColor="#4BC264" v-model="value" @change="change"></u-switch>
					</view>
				</view>
			</view>
		</view>
		
		
		<u-popup closeable :round="10" :show="installShow" mode="center" @close="close" @open="open">
			<view class="popup-box">
				<view class="pop-title">定时设置</view>
				<view style="height: 48rpx; width: 1rpx"></view>
		
				<view class="each-title">开始时间</view>
				<view class="input-b">
					<view class="input">
						<text>00:00</text>
					</view>
					<image src="../../static/select-r.png" mode=""></image>
				</view>
				
				<view style="height: 32rpx; width: 1rpx"></view>
				<view class="each-title">定时关闭小时</view>
				<view class="input-b">
					<view class="input">
						<text>1小时</text>
					</view>
					<image src="../../static/select-r.png" mode=""></image>
				</view>
		
				<view class="pop-btn">保存</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{ switch: false},
				{ switch: false},
				{ switch: true}
			],
			value:false,
			installShow:false
		};
	},
	methods: {
		change(e) {
			console.log('change', e);
		},
		open() {
			// console.log('open');
		},
		close() {
			this.installShow = false;
		},
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f8fa;
}

.box {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0 32rpx;
	.each {
		width: 267rpx;
		// height: 395rpx;
		background: #ffffff;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 32rpx;
		margin-top: 32rpx;

		.equipment {
			display: flex;
			.img {
				width: 80rpx;
				height: 80rpx;
				background: rgba(75, 194, 100, 0.1);
				border-radius: 40rpx;
			}
			.equipment-r {
				margin-left: 24rpx;
				.equipment-name {
					font-weight: bold;
					font-size: 30rpx;
					color: #1c274c;
				}
				.equipment-text {
					font-weight: 500;
					font-size: 22rpx;
					color: #a4a9b7;
					margin-top: 8rpx;
				}
			}
		}

		.timing {
			display: flex;
			justify-content: space-between;
			align-items: center;
			// margin-top: 32rpx;
			.timing-l {
				.timing-name {
					font-weight: 500;
					font-size: 22rpx;
					color: #a4a9b7;
				}
				.timing-text {
					font-weight: bold;
					font-size: 22rpx;
					color: #1c274c;
					margin-top: 8rpx;
				}
			}
			.timing-r {
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
}


.popup-box {
	width: 520rpx;
	background: #ffffff;
	border-radius: 48rpx 48rpx 48rpx 48rpx;
	padding: 40rpx;
	.pop-title {
		text-align: center;
		font-weight: 800;
		font-size: 36rpx;
		color: #1c274c;
	}
	.each-title {
		font-weight: bold;
		font-size: 28rpx;
		color: #1c274c;
		padding-bottom: 16rpx;
	}
	.input-b {
		display: flex;
		justify-content: space-between;
		width: 456rpx;
		background: #f7f8fa;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 26rpx 32rpx;
		.input {
			font-size: 28rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #1C274C;
		}
		image {
			width: 32rpx;
			height: 32rpx;
		}
	}
	.pop-btn {
		width: 520rpx;
		height: 90rpx;
		background: #4bc264;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: auto;
		font-weight: bold;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 90rpx;
		text-align: center;
		margin-top: 64rpx;
	}
}
</style>
